<template>
  <div class="goodsinfo-container">
    <!--动画小球-->
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>
    <!--商品轮播图-->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner swiper-padding">
          <!-- 轮播图区域 :isfull="false"高100%，宽自适应 -->
          <swiper :lunbotuList="lunbotu" :isfull="false"></swiper>
        </div>
      </div>
    </div>
    <!--商品购买-->
    <div class="mui-card">
      <div class="mui-card-header">{{ goodsinfo.title }}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价：<del>￥{{ goodsinfo.market_price }}</del
            >&nbsp;&nbsp;&nbsp;&nbsp;销售价：<span class="now_price"
              >￥{{ goodsinfo.sell_price }}</span
            >
          </p>
          <p>
            购买数量：<numbox
              :stockQuantity="goodsinfo.stock_quantity"
              @getcount="getSelectedCount"
              :max="goodsinfo.stock_quantity"
            ></numbox>
          </p>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addToShopCar"
              >加入购物车</mt-button
            >
          </p>
        </div>
      </div>
    </div>

    <!--商品参数-->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{ goodsinfo.goods_no }}</p>
          <p>库存情况：{{ goodsinfo.stock_quantity }} 件</p>
          <p>上架时间：{{ goodsinfo.add_time | dateFormat }}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="goDesc(id)"
          >图文介绍</mt-button
        >
        <mt-button type="danger" size="large" plain @click="goComment(id)"
          >商品评论</mt-button
        >
      </div>
    </div>
  </div>
</template>
<script>
  import swiper from '../subcomponents/swiper.vue'
  import numbox from '../subcomponents/goodsinfo_numbox.vue'
  export default {
    data() {
      return {
        id: this.$route.params.id, //将路由参数对象中的ID挂在到data中
        lunbotu: [],
        goodsinfo: {},
        ballFlag: false, //购物车小球隐蔽
        selectedCount: 1, //保存用户选中的商品数量，默认至少要买1件商品
      }
    },
    created() {
      this.getLunbotu(), this.getGoodsInfo()
    },
    methods: {
      getLunbotu() {
        this.$axios.get('./json/thumimages.json').then((result) => {
          if (result.data.status === 0) {
            result.data.message.forEach((item) => {
              item.img = item.src
              item.url = ''
            })
            this.lunbotu = result.data.message
          }
        })
      },
      getGoodsInfo() {
        this.$axios.get('./json/goodsinfo.json').then((result) => {
          if (result.data.status === 0) {
            //成功，把数据保存到data上
            var messageList = result.data.message //获取所有新闻列表
            var index = messageList.findIndex((item) => {
              //获取id对应的对象序号
              if (item.id == this.id) {
                return true
              }
            })
            this.goodsinfo = messageList[index]
          }
        })
      },
      goDesc(id) {
        //点击使用编程式导航 跳转到图文介绍页面
        this.$router.push({ name: 'goodsdesc', parmars: { id } })
      },
      goComment(id) {
        //点击跳转到 评论
        this.$router.push({ name: 'goodscomment', parmars: { id } })
      },
      addToShopCar() {
        //添加购物车
        this.ballFlag = !this.ballFlag
        //{id:57,count:2,price:2000,selected:false}
        var goodsinfo = {
          id: this.id,
          count: this.selectedCount,
          price: this.goodsinfo.sell_price,
          selected: true,
        }
        //调用vuex中的方法 this.$store.commit('方法名','按需传递唯一的参数')
        this.$store.commit('addToCar', goodsinfo)
      },
      beforeEnter(el) {
        //进入时的动画
        el.style.transform = 'translate(0,0)'
      },
      enter(el, done) {
        //停止时的状态
        el.offsetWidth

        //获取小球在页面中的位置
        const ballPosition = this.$refs.ball.getBoundingClientRect()
        //获取徽标在页面中的位置
        const badgePosition = document
          .getElementById('mui-badge')
          .getBoundingClientRect()
        const xDist = badgePosition.left - ballPosition.left
        const yDist = badgePosition.top - ballPosition.top
        //el.style.transform = 'translate(94px,232px)'
        el.style.transform = `translate(${xDist}px,${yDist}px)`
        el.style.transition = 'all 0.5s cubic-bezier(.4,-0.3,1,.68)'
        done()
      },
      afterEnter(el) {
        //最后状态
        this.ballFlag = !this.ballFlag
      },
      getSelectedCount(count) {
        //购买个数方法
        //当子组件把选中的数量传递给父组件时，吧选中的值保存到data上
        this.selectedCount = count
        //console.log(this.selectedCount)
      },
    },
    components: {
      swiper,
      numbox,
    },
  }
</script>
<style lang="scss" scoped>
  .goodsinfo-container {
    background: #eee;
    overflow: hidden;
    .ball {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #ff0000;
      position: absolute;
      z-index: 99;
      top: 299px;
      left: 147px;
    }
    .swiper-padding {
      padding: 0;
    }
    .now_price {
      color: #ff5000;
      font-size: 16px;
      font-weight: bold;
    }
    .mui-card-footer {
      display: block; //将原本flex布局改掉
      button {
        margin: 15 0;
      }
    }
    button {
      margin-right: 5px;
    }
  }
</style>